<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>

<script src="vue.js"></script>

<style type="text/css">
  
  /*vue官方提供的样式*/
  .v-enter,.v-leave-to{
    /*进入时的效果和退出时的效果，不变时就稳定状态*/
    opacity:0;
    transform: translateX(150px)
  }


/*进入进出时的动画（元素正在进行进入或者退出时的设置）*/
.v-enter-active,.v-leave-active{
  transition:all 1.3s ease;
}





/*h6用*/
.my-enter{
    opacity:0;
    transform: translateY(150px)
}
.my-leave-to{
    /*进入时的效果和退出时的效果，不变时就稳定状态*/
    opacity:0;
    transform: translateY(-150px)
  }


/*进入进出时的动画（元素正在进行进入或者退出时的设置）*/
.my-enter-active,
.my-leave-active{
  transition:all 1.3s ease;
}






</style>

</head>
<body>


<ol>
    <li>需求，点击按钮让h3/h6显示/隐藏切换</li>
  </ol>


<div id="app">
  
  <button @click='flag=!flag'>h3切换</button>
<transition>
  <h3 v-show="flag">这是一个h3</h3>
</transition>

<hr>
  <button @click='flag2=!flag2' id="btn2">h6切换</button>
<transition name="my">
  <h6 v-show="flag2">这是一个h6</h6>
</transition>



</div>


<br>


<script type="text/javascript">



var app = new Vue({
  el: '#app',

  data: {
  	flag:false,
    flag2:false
  },

  methods:{

  	


  }

})





</script>

	
</body>
</html>